<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page language="java" import="com.soft.model.*"%>
<%@ page language="java" import="java.util.*"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/index.css" />
<link rel="stylesheet" href="../../css/common.css" />
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../js/common.js" /></script>
<script type="text/javascript" src="../../js/admin/ready.js" /></script>
<script type="application/javascript">
	$(document).ready(function() {
		
		//查询
		$("#search").click(function(event) {
			$("#currPage").val("1");
			ajaxRefresh("");
		});
		
		//分页
		$(".page-c").on("click",".item",function(event){
			var currPage = $(this).text();
			$("#currPage").val(currPage);
			ajaxRefresh("");
		});
		
		//新增
		$("#insert").click(function(event) {
			window.location.href="user_add";
		});
		
		//编辑
		$(".table").on("click",".update",function(event) {
			//console.log(event.currentTarget.name);
			var id = $(this).attr("selectedId");
			window.location.href="user_upd?id="+id;
		});
		
		
		//删除
		$(".table").on("click",".delete",function(event) {
			var delIds = $(this).attr("selectedId");//被选中的用户id
			showMessage("I", "您确定要删除这个记录吗？", function() {
				ajaxRefresh(delIds);
			});
		});
		
		//授权
		$(".table").on("click",".permission",function(event) {
			console.log(event.currentTarget.name);
			var id = $(this).attr("selectedId");
			window.location.href="user_permissionAdd?id="+id;
		});
		
		//全选
		$("#checkAll").click(function(event){
			var isChecked = $(this).prop("checked");
			if(isChecked){
				$("input[name='checkIds']").prop("checked",true);
			}else{
				$("input[name='checkIds']").prop("checked",false);
			}
		});
		
		//批量删除
		$("#checkDel").click(function(event){
			//删除信息
			var ids = $("input[name='checkIds']:checked");//被选中的用户id
			var delIds = "";//要删除的用户id
			$.each(ids,function(){
				delIds += $(this).val()+",";
			});
			showMessage("I", "您确定要删除这些记录吗？", function() {
				ajaxRefresh(delIds);
			});
		});
	});
		
	/*
	 * ajax刷新页面数据
	 * delIds:需要删除记录对应的id
	 */
	function  ajaxRefresh(delIds){
		//取消全选
		$("#checkAll").prop("checked",false);
		
		var currPage = $("#currPage").val();//当前页码
		var searchText = $("#searchText").val();//搜索的内容
		var beginTime = $("#beginTime").val();//开始时间
		var endTime = $("#endTime").val();//结束时间
		var currUserId = $("#currUserId").val();//当前登录的用户id
		//用户列表
		var str_user="";//数据
		var table = $(".table");//表
		var row = $(".row-border");//记录行
		//页码
		var str_page="";//数据
		var pages = $(".page-c");//页码区
		var page_item = $(".item");//页码
		//记录数
		var count = $("#count");
		
		$.ajax({
			url:"user_ajax",
			data:{
				delIds:delIds,
				currPage:currPage,
				searchText:searchText,
				beginTime:beginTime,
				endTime:endTime
			},
			type:"post",
			dataType:"json",
			success:function(json){
				if(json == null || json == ""){
					return;
				}
				//用户表
				row.remove();
				str_user = refreshTable(str_user,currUserId,json);
				table.append(str_user);
				//页码区域
				page_item.remove();
				str_page = refreshPage(str_page,currPage,json);
				pages.append(str_page);
				//记录数
				count.text("共"+json.totalCount+"条记录");
			}
		});
	};
	
	//刷新表中的数据
	function refreshTable(str_user,currUserId,json){
		//用户信息
		var arr = json.list_user;
		$.each(arr,function(index,user){
			str_user += "<div class='row row-border'>";
			//ID
			str_user += "<div class='col-half'>"
			+"<div class='grid-label'>";
			if(currUserId != user.id){
				str_user+="<input type='checkbox' name='checkIds' value='"+user.id+"'>";
			}
			str_user += user.id+"</div></div>";
			//usercname
			str_user += "<div class='col-1'>"
			+"<div class='grid-label'>"+user.usercname+"</div></div>";
			//username
			str_user += "<div class='col-2'>"
			+"<div class='grid-label'>"+user.username+"</div></div>";
			//addtime
			str_user += "<div class='col-2'>"
			+"<div class='grid-label'>"+user.addtime+"</div></div>";
			//操作
			str_user += "<div class='col-3'>"
			+"<div class='update width-three grid-button button-put' selectedId='"+user.id+"'>编辑</div>";
			if(currUserId != user.id){
				str_user += "<div class='delete width-three grid-button button-del' selectedId='"+user.id+"'>删除</div>"
			}else{
				str_user += "<div class='width-three grid-button button-del' selectedId='"+user.id+"'>管理员</div>"
			}
			str_user += "<div class='permission width-three grid-button button-put' selectedId='"+user.id+"'>授权</div></div>";
			str_user += "</div>";
		});
		return str_user;
	}
	//刷新页码
	function refreshPage(str_page,currPage,json){
		var pageCount = parseInt(json.pageCount);
	
		for(var i = 1;i <= pageCount;i++){
			if(i == currPage){
				str_page+="<div target-page='"+(i-1)%5+1+"' class='item font-small font-white button-get selected-item '>"
				+i+"</div>";
			}else{
				str_page+="<div target-page='"+(i-1)%5+1+"' class='item font-small font-white button-get '>"
				+i+"</div>";
			}
		}
		return str_page;
	}
	
	var getDataByPage = function(pageInfo) {
		console.log(pageInfo);
	}
</script>
</head>
<body class="content-body">
	<div class="title-area bg-color-black font-normal font-white">乌托邦别墅预定管理平台>系统设置>用户管理</div>
	<div class="search-area bg-color-gray">
		<input type="hidden" id="currPage" name="currPage" value="${currPage!=null?currPage:'1' }"/>
		<input class="row-item bg-color-white search-input" type="text" id="searchText" name="searchText" placeholder="请输入名称" value="${searchText}" />
		<input class="row-item bg-color-white search-input" type="date" id="beginTime" name="beginTime"  value="${beginTime}" />
		<span style="font-size: small; margin-left: 5px;">-</span>
		<input class="row-item bg-color-white search-input" type="date" id="endTime" name="endTime"  value="${endTime}" />
		<span class="button-get button-item" id="search" >查询</span>
		<span class="button-put button-item" id="insert">新增</span>
		<span class="button-del button-item" id="checkDel">批量删除</span>
	</div>

	<!-- user list -->
	<div class="table bg-color-gray">
		<div class="row">
			<div class="col-half">
				<div class="grid-title"><input type="checkbox" id="checkAll">ID</div>
			</div>
<!-- 			<div class="col-half"> -->
<!-- 				<div class="grid-title">头像</div> -->
<!-- 			</div> -->
			<div class="col-1">
				<div class="grid-title">用户姓名</div>
			</div>
			<div class="col-2">
				<div class="grid-title">账户</div>
			</div>
			<!-- 				<div class="col-2"><div class="grid-title">角色</div></div> -->
			<div class="col-2">
				<div class="grid-title">注册时间</div>
			</div>
			<div class="col-3">
				<div class="grid-title">操作</div>
			</div>
		</div>
		<%	
			//用户登录信息
			User user_login = (User)session.getAttribute("user_login");
			int currUserId = user_login==null ? 0 :user_login.getId();
		%>
		<input id="currUserId" type="hidden" value="<%=currUserId%>">
		<%
			//用户列表
			List<User> list_user = (List<User>) request.getAttribute("list_user");
			if (list_user != null && list_user.size() > 0) {
				for (User user : list_user) {
					pageContext.setAttribute("user", user);
		%>
		<div class="row row-border">
			<div class="col-half">
				
			<%
				if (user.getId() != currUserId) {
			%>
				<div class="grid-label"><input type="checkbox" name="checkIds" value="${user.id}">${user.id}</div>
			<%
				}else{
			%>
				<div class="grid-label">${user.id}</div>
			<%
				}
			%>
			</div>
<!-- 			<div class="col-half"> -->
<%-- 				<div class="grid-label"><img alt="icon" width="30" height="30" src="upload/${user.imgname}"></div> --%>
<!-- 			</div> -->
			<div class="col-1">
				<div class="grid-label">${user.usercname}</div>
			</div>
			<div class="col-2">
				<div class="grid-label">${user.username}</div>
			</div>
			<div class="col-2">
				<div class="grid-label">${user.addtime}</div>
			</div>
			<div class="col-3">
				<div class="update width-three grid-button button-put"
					selectedId="${user.id}">编辑</div>
			<%
				if (user.getId() != currUserId) {
			%>
				<div class="delete width-three grid-button button-del"
					selectedId="${user.id}">删除</div>
			<%
				}else{
			%>
					<div class=" width-three grid-button button-del"
						selectedId="${user.id}" >管理员</div>
			<%		
				}
			%>
				<div class="permission width-three grid-button button-put"
					selectedId="${user.id}">授权</div>
			</div>
		</div>
		<%
			}
			}
		%>
	</div>

	<!-- page_area -->
	<div class="page-area">
		<div option="front" class="option font-small font-white button-get"><<</div>
		<div class="page-list">
			<div class="page-c">
				<%	
					int pageCount = (int) request.getAttribute("pageCount");
					String pageStr= (String)request.getAttribute("currPage");
					int currPage = pageStr == null ? 1 : Integer.parseInt(pageStr);
					for (int i = 1; i <= pageCount; i++) {
						String addClass = "";
						if(i == currPage){
							addClass = "selected-item";
						}
				%>
					<div target-page="<%=(i-1)%5+1 %>" class="item font-small font-white button-get <%=addClass %>"><%=i %></div>
				<% }%>
			</div>
		</div>
		<div option="back" class="option font-small font-white button-get">>></div>
	</div>
	<span id="count" style="color: blue;font-size: 16px;">共${totalCount}条记录</span>
</body>
</html>